@import '../custom.less';

@grid-prefix-cls: ~'@{css-prefix}grid';
@grid-filter-prefix-cls: ~'@{css-prefix}grid-filter';
@grid-filter-wrapper-prefix-cls: ~'@{css-prefix}grid-filter-wrapper';
@grid-radio-prefix-cls: ~'@{css-prefix}grid-radio';

// 筛选
.@{grid-filter-wrapper-prefix-cls} {
  @apply pl-1;
  @apply pt-px;
  @apply align-middle;
  @apply inline-block;
  @apply ~'leading-[0]';

  &.is__active {
    .@{grid-filter-prefix-cls}__btn {
      @apply fill-color-icon-hover;
    }
  }

  .@{grid-filter-prefix-cls}__btn {
    @apply text-md;
    @apply fill-color-icon-secondary;
    @apply cursor-pointer;
    @apply align-middle;
    @apply w-4;
    @apply h-4;

    &:hover {
      @apply fill-color-icon-hover;
    }
  }
}

.filter__active {
  .@{grid-filter-wrapper-prefix-cls} {
    .@{grid-filter-prefix-cls}__btn {
      @apply fill-color-brand;
    }
  }
}

// 筛选容器
.@{grid-prefix-cls}__filter-wrapper {
  @apply hidden;
  @apply absolute;
  min-width: 270px;
  @apply rounded-sm;
  @apply border border-solid border-color-bg-2;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
  @apply text-xs;
  @apply ~'z-[4000]';

  &.filter__active {
    @apply block;
  }

  .@{grid-prefix-cls}__filter-body {
    @apply p-0;
    @apply list-none;
    @apply bg-color-bg-1;
    @apply overflow-x-hidden;
    @apply overflow-y-auto;

    .@{grid-prefix-cls}__filter-panel {
      @apply m-0;
      @apply w-full;
      @apply pt-3 pr-2 pb-2 pl-2;
      @apply border-b border-b-color-border;

      &.filter-panel__default {
        @apply pt-2 pr-5 pb-1 pl-5;
      }

      &.filter-panel__default,
      &.filter-panel__clear {
        @apply pl-0;
        @apply pr-0;

        .@{grid-prefix-cls}__filter-option {
          @apply cursor-pointer;
          @apply pl-4;

          &:hover {
            @apply bg-color-brand-hover;

            a {
              @apply text-color-text-inverse;
            }
          }

          &.active {
            @apply bg-color-fill-6;

            a {
              @apply text-color-brand;
            }
          }
        }
      }

      &.filter-panel__enum {
        @apply pt-1;

        .@{grid-prefix-cls}__filter-options {
          max-height: 170px;
          @apply overflow-auto;

          .@{grid-prefix-cls}__filter-empty {
            @apply text-center;
            line-height: 30px;
          }

          .@{grid-prefix-cls}__filter-option {
            @apply h-7;
            @apply leading-7;
            @apply py-0 px-2;
            max-width: 240px;
            @apply w-auto;
            @apply flex;
            @apply justify-center;
            @apply items-center;
            @apply cursor-pointer;

            &.selected {
              @apply bg-color-brand-hover-subtler;
            }

            svg {
              @apply text-base;
              @apply fill-color-icon-secondary;
              @apply mr-2;
              @apply outline-0;
              @apply align-middle;

              &:hover {
                @apply fill-color-icon-hover;
              }

              &.is-checked {
                @apply fill-color-brand;
              }
            }
          }
        }
      }

      .@{grid-prefix-cls}__filter-option {
        @apply m-0;
        @apply h-6;
        @apply leading-6;

        a {
          @apply text-color-text-primary;
          @apply whitespace-nowrap;
          @apply overflow-hidden;
          @apply text-ellipsis;
          @apply w-full;
        }

        &.filter-option__radios {
          @apply mb-3;
          @apply flex;
          @apply justify-around;

          label.@{grid-radio-prefix-cls} {
            @apply flex;
            @apply items-center;
            @apply w-auto;

            .@{grid-radio-prefix-cls}__label {
              @apply text-color-text-primary;
              @apply text-ellipsis;
              @apply overflow-hidden;
              @apply whitespace-nowrap;
              @apply w-auto;
              max-width: 80%;
            }

            & + .@{grid-radio-prefix-cls} {
              @apply ml-0;
            }

            &:nth-child(2) {
              @apply text-center;
            }

            &:nth-child(3) {
              @apply text-right;
            }
          }
        }

        &.filter-option__btns {
          @apply mt-2 pr-0 mb-4 ml-0;
          @apply text-center;
        }
      }
    }

    .filter-option__input > input {
      @apply w-full;
      @apply border border-solid border-color-border;
      @apply rounded-sm;
      @apply outline-0;
      @apply py-0 px-2;
      @apply box-border;
      line-height: inherit;
      height: 30px;

      &:focus {
        @apply border border-solid border-color-border-focus;
      }
    }
  }

  .@{grid-prefix-cls}__filter-footer {
    @apply border-t border-t-color-bg-2;
    @apply p-2;

    button {
      @apply bg-transparent;
      padding: 0 3px;
      @apply border-0;
      font-size: 13px;
      @apply text-color-text-primary;
      @apply cursor-pointer;

      &:focus {
        @apply outline-0;
      }

      &:hover {
        @apply text-color-brand;
      }

      &.is__disabled {
        @apply text-color-text-disabled;
        @apply cursor-not-allowed;
      }
    }
  }

  // SAAS筛选容器
  &.filter-wrapper-saas {
    .@{grid-prefix-cls}__filter-body {
      @apply overflow-hidden;

      .@{grid-prefix-cls}__filter-panel {
        &:not(:last-child) {
          @apply pb-0;
        }

        &:last-child {
          @apply border-b-0;
        }

        &.filter-panel__default,
        &.filter-panel__clear {
          @apply py-2;
          @apply px-0;
        }

        .@{grid-prefix-cls}__filter-option.filter-option__btns {
          @apply flex;
          @apply flex-row-reverse;
          @apply justify-start;
          @apply items-center;
          @apply my-4;
          @apply mx-0;

          // Tiny 新增，使用tiny-button组件，删除表格内置button组件
          .@{css-prefix}button[type='button'] {
            @apply m-0;
            @apply ml-2;
            @apply rounded;
          }
        }
      }
    }
  }
}
